<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示图片</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
            border: 0;
        }
        #box{
            display: flex;
            justify-content: center;
        }
        .masonry{
            /* height: 500px;
            border: 0.2em solid rgb(95, 168, 150);
            margin-top: 50px;
            display: flex;
            flex-flow: row wrap;
            justify-content: space-between;
            align-items: center;
            padding: 10px; */
            width: 70%;
            height: 100%;
            column-count: 3;
            column-gap: 2em;
        }
        /* .item{
            max-width: 30%;
            max-height: 30%;
            line-height: 150px;
            border: 0.2em  solid rgb(255, 255, 255,.8);
            text-align: center;
            font-weight: bold;
            border-radius: 15px;
            overflow: hidden;
        } */
        img{
            width: 100%;
            height: 100%;
        }
        .item_content:hover{
            box-shadow: 5px 5px 5px rgb(95, 168, 150);
        }
        .item_content{
            break-inside: avoid;
            padding: 5px;
            margin-bottom: 2em;
            background-color:rgb(255, 255, 255,.8);
        }
        .item_content .lar{
            height: 200px;
        }
        .item_content .mid{
            height: 100px;
        }
        .item_content .sma{
            height: 50px;
        }

        @media screen and (max-width:800px) {
            .masonry{
                column-count: 2;
            }
        }
        @media screen and (max-width:400px) {
            .masonry{
                column-count: 1;
            }
        }
    </style>
</head>
<body>
        <!-- {% for img in imgs %}
        <img src=".{{ img.img.url }}" />
        {% endfor %} -->
    <div id="box">
        <div class="masonry">
            <div v-for="(i,index) in imgArray"  :class="itemclass[i]" :key="index" class="item_content">
                <img :src="imgArray[index]"/>
            </div>
        </div>
    </div>
</body>
    <script type="text/javascript">
        Vue.config.productionTip = false
        axios.defaults.baseURL='http://localhost:8000';
        // lar 最大 mid中等 sma最小
        new Vue({
            el:'#box',
            data:{
              imgArray:[],
              itemclass:['lar','mid','sma','sma','lar','mid','sma','lar','sma']
            },
            computed:{
            //计算方法
            
            },
            methods:{
            //方法
                localRequest(){
                    axios({
                        method:'get',
                        url:'/reptile/showImg'
                    }).then(response=>{
                        //显示9张不同的图片
                        let i=9
                        let random;
                        while(i>0){
                            i--;
                            length=response.data.length
                            random=Math.floor(Math.random()*length)
                            random_img=response.data[random]
                            if(this.imgArray.indexOf(random_img) == -1){
                                console.log(random)
                                this.imgArray.push(random_img)
                            }else{
                                i++;
                            }
                        }
                })
                }
            },
            filters:{
            //过滤器
            
            },mounted() {
                
                setInterval(()=>{
                    this.localRequest()
                },1000)

                   
            },
        })
        </script>
    </html>
